@keyframes hatBreath {
  0% {
      transform: translateY(0%) scaleY(1);
  }
  15% {
      transform: translateY(2%);
  }
  25% {
      transform: translateY(0%) scaleY(1);
  }
  35% {
      transform: translateY(2%);
  }
  50% {
      transform: translateY(0%) scaleY(1);
  }
  100% {
      transform: translateY(0%) scaleY(1);
  }
}
@keyframes hammer {
  0% {
    //   top: 32%;
    transform: translateY(0) skewY(0deg);
  }
  50% {
    //   top: 22%;
    transform: translateY(-15%) skewY(24deg);
  }
  100% {
    //   top: 32%;
    transform: translateY(0) skewY(0deg);
  }
}

@keyframes handHammer {
  0% {
    //  top: 32%;
    transform: translateY(0);
  }
  50% {
    //  top: 13%;
    transform: translateY(-150%);
  }
  100% {
    //  top: 32%;
    transform: translateY(0);
  }
}

@keyframes bambooHammer {
  0% {
    // top: -2%;
    transform: translateY(-2%);
  }
  50% {
    // top: -19%;
    transform: translateY(-19%);
  }
  100% {
    // top: -2%;
    transform: translateY(-2%);
  }
}

@keyframes halo {
  0% {
    visibility: visible;

    top: 93%;
    left: -4%;
    width: 15%;
    height: 6%;
  }
  50% {
    top: 83%;
    left: -28%;
    width: 63%;
    height: 27%;
  }
  100% {
    visibility: visible;

    top: 93%;
    left: -4%;
    width: 15%;
    height: 6%;
  }
}
.owl.general {
  .halo {
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    top: 93%;
    left: -4%;
    width: 15%;
    height: 6%;
    background: radial-gradient(rgba(244,195,111,.7), transparent);
    border-radius: 50%;
  }
  .ripple {
    visibility: hidden;
    position: absolute;
    top: 96%;
    left: 3%;
    width: 15%;
    height: 6%;
    border: 1px solid rgba(144,98,66, .3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    
    .ripple-1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: 64%;
      border: 1px solid rgba(144,98,66, .7);
      border-radius: 50%;
      .ripple-2 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 54%;
        border: 1px solid rgba(144,98,66, 1);
        border-radius: 50%;
      }
    }
  }
  &.fighting .halo {
    animation: halo .2s linear 1 .3s;
  }
  &.fighting .ripple {
    opacity: .1;
    visibility: visible;
    width: 80%;
    height: 50%;
    border: 3px solid rgba(144,98,66, .3);
    transition: all .1s linear .3s;
    
    .ripple-1 {
      width: 70%;
      height: 64%;
      border: 3px solid rgba(144,98,66, .7);
      .ripple-2 {
        width: 50%;
        height: 54%;
        border: 3px solid rgba(144,98,66, 1);
      } 
    }
  }
  .body {
    .hat {
      position: absolute;
      left: 16.5%;
      top: -24.5%;
      height: 63%;
    }
    .clothes {
      position: absolute;
      left: 20.1%;
      top: 42.5%;
      height: 47.5%;
    }
    .health {
        top: -34%;
    }
  }

}
.owl.fly {
  .body {
    .wings.folded {
      visibility: hidden;
    }
  }
}